<template>
  <div class="register">
    <van-nav-bar title="注册" right-text="去登陆" @click-right="onClickRight" />

    <div class="main">
      <van-form @submit="onSubmit">
        <van-field class="input" v-model="formData.username" placeholder="用户名" />
        <van-field class="input" v-model="formData.password" type="password" placeholder="密码" />
        <van-field class="input" v-model="formData.passwordTwo" type="password" placeholder="确认密码" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { user_register } from "../axios/api";
import { Toast } from 'vant';

export default {
  data() {
    return {
      formData: { username: '', password: '', passwordTwo: '' },
    }
  },
  methods: {
    onClickRight() {
      Toast('登陆页面');
      this.$router.push('/mylogin')
    },
    onSubmit() {
      if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.formData.username) == false) {
        Toast.fail('请输入正确的手机号格式')
      } else if (this.formData.password != this.formData.passwordTwo) {
        Toast.fail('两次输入的密码不一致')
      } else {
        let cope = JSON.parse(JSON.stringify(this.formData));
        delete cope.passwordTwo;
        console.log(cope);
        user_register({ phone: cope.username, pass: cope.password }).then(
          response => {
            // console.log(response.data);
            if (response.data.code !== 200) {
              Toast.fail('手机号已被注册')
            } else {
              Toast.success('注册成功');
              this.$router.push('/mylogin')
            }
          }
        )
      }
    }
  },
}
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.input {
  margin: 60px auto;
  color: gray;
  border: 1px solid rgba(128, 128, 128, 0.088);
  border-radius: 30px;
}
</style>